<template>
  <div>
    测试页面
    <p id="p1">{{ count }}</p>
    <button @click="count++">count++</button>
    <button @click="destory">销毁组件</button>
    <test-child />
  </div>
</template>

<script>
import TestChild from './test-child.vue'
export default {
  data () {
    return {
      count: 1
    }
  },

  components: {
    TestChild
  },
  // vue的实例从创建到销毁的整个过程,生命周期

  // 此时 数据 \ 方法 为 创建
  beforeCreate () {
    console.log(this.count)
    // console.log(this.getList)
  },

  // 最早能够获取到 data的数据 和 methods的方法
  // 会进行发请求获取数据
  created () {
    console.log(this.count)
    // 会等数据 同步dom挂载
    // this.$nextTick(_ => {
    //   console.log(this.$el)
    // })
    // console.log(this.getList)
  },

  // 挂载dom 为挂载
  beforeMount () {
    console.log(this.$el)
  },

  // 操作dom
  mounted () {
    console.log(this.$el)
    window.addEventListener('click', this.clickWindow)
  },

  // 更新阶段 数据驱动的第 1 步 数据变了
  beforeUpdate () {
    console.log(this.count)
    console.log(document.querySelector('#p1').innerHTML)
  },

  // 数据驱动的第二步 视图已经更新
  updated () {
    console.log(this.count)
    console.log(document.querySelector('#p1').innerHTML)
  },

  // 销毁阶段 进行定时器销毁 清除window的事件
  beforeDestroy () {
    console.log('销毁前')
    window.removeEventListener('click', this.clickWindow)
  },

  destroyed () {
    console.log('销毁了')
  },

  methods: {
    getList () {
      console.log('获取列表')
    },
    destory () {
      this.$destroy()
    },
    clickWindow () {
      console.log('点击了window')
    }
  }
}
</script>

<style scoped lang='less'>
</style>
